@import "home";

.start_login,
.start_adv_box {
	width: 48%;
	display: inline-block;
	vertical-align: top;
}

.start_adv_box {
	float: right;
	height: 26rem;
	border-left: solid 1px #000;
	text-align: center;
	padding-top: 3rem;
	margin-top: 2rem;

	&>img {
		width: 90%;
		// transition: all 0.5s linear;
		// -webkit-transition: all 0.5s linear;
		// -ms-transition: all 0.5s linear; 
	}
}

.start_register {
	width: 40rem;
	margin: 2rem auto;
}

.start_login,
.start_register {
	margin: auto;
	.start_login_title {
		@extend %noMargin;
		line-height: 3rem;
		font-size: 1.6rem;
		font-family: $fontFamily;
		font-weight: normal;
		color: #333;
		border-bottom: solid 1px #e1e1e1;
	}

	.start_login_logo {
		display: block;
		width: 35%;
		height: auto;
		margin: 2rem auto 3rem;

		&>img {
			width: 100%;
		}
	}
}

.start_username {
	text-align: center;
}

.start_login_group {
	width: 100%;
	height: auto;
	margin: 1rem 0rem;

	&>label {
		display: block;
		width: 10rem;
		line-height: 2rem;
		font-size: 1.4rem;
		font-family: $fontFamily;
		color: #333;
		padding-left: 2.5rem;
		margin-bottom: 0.5rem;
		text-align: left;
		
		&.phone {
			background: url(../images/iconfont-peiziiconfont09.png) no-repeat;
			background-size: auto 1.8rem;
			background-position: 1rem center;
		}

		&.password {
			background: url(../images/iconfont-mima.png) no-repeat;
			background-size: auto 1.6rem;
			background-position: 1rem center;
		}

		&.confirm {
			background: url(../images/iconfont-weibiaoti203.png) no-repeat;
			background-size: auto 1.6rem;
			background-position: 1rem center;
		}

		&.vcode {
			background: url(../images/iconfont-yanzhengma.png) no-repeat;
			background-size: auto 1.4rem;
			background-position: 1rem center;
		}

		&.username {
			padding-left: 3rem;
			background: url(../images/iconfont-yonghuming.png) no-repeat;
			background-size: auto 1.6rem;
			background-position: 1rem center;
		}

	}

	&>input {
		width: 100%;
		height:3rem;
		font-size: 1.2rem;
		font-family: $fontFamily;
		font-weight: normal;
		border-radius: 4rem;
		border: solid 1px #dcdcdc;
		padding-left: 1rem;
		padding-right: 1rem;
		outline: none;
		-webkit-appearance: none;

		&:focus {
			border: solid 1px #000;
		}
	}

	&>button {
		width: 100%;
		height: 4rem;
		font-size: 1.4rem;
		font-family: $fontFamily;
		@extend %noBorder;
		border-radius: 4rem;
		background: #000;
		color: #fff;
		margin-top: 1rem;
		cursor: pointer;
		outline: none;
	}

	.start_vcode,
	.start_vcodebtn  {
		display: inline-block;
		vertical-align: top;
	}
	.start_vcode {
		width: 68%;
	}

	.start_vcodebtn {
		float: right;
		width: 30%;	
		height: 3rem;
		font-size: 1rem;
		font-family: $fontFamily;
		@extend %noBorder;
		border-radius: 4rem;
		background: #000;
		color: #fff;
		margin-top: 0rem;
	}
}

.start_register_footer{
	display: none;
}
.start_login_footer {
	margin-top: 1rem;
	border-top: solid 1px #e1e1e1;

	&>ul {
		@include grid_line;
		@extend %ul;
		padding-top: 1rem;
		
		&>li {
			&>a {
				line-height: 2rem;
				font-size: 1.2rem;
				font-family: $fontFamily;
				color: #333;
			
				&:hover {
					color: #e75744;
				}
			}

			&.start_register_icon {
				padding-left: 1.6rem;
				background: url(../images/register.png) no-repeat;
				background-position: left center;
				background-size: auto 1.4rem;
			}

			&.start_forget_icon {
				float: right;
				padding-left: 1.6rem;
				background: url(../images/forget.png) no-repeat;
				background-position: left center;
				background-size: auto 1.4rem;
			}
		}

		// &>li:last-child{
		// 	float: right;
		// }
	}		
}

.start_disable {
	cursor: default !important;
	background: #e1e1e1 !important;
}

.start_user_head {
	position: relative;

	.start_user_imgbox {
		position: relative;
		z-index: 10;
		padding: 5rem 1rem 0rem;	
		text-align: center;

		.start_user_image {
			width: 10rem;
			height: 10rem;
			margin: auto;
			border-radius: 50%;
			border: solid 0.5rem #fff;
			background: #fff;
			overflow: hidden;

			&>img {
				width: 9rem;
				height: 9rem;
			}
		}

		.start_user_name {
			line-height: 2rem;
			font-size: 1.4rem;
			font-family: $fontFamily;
			color: #333;
			text-align: center;
			padding: 1rem 0.5rem 0.5rem;
			margin-bottom: 0.5rem;
		}
	}

	.start_user_head_bg {
		position: absolute;
		top: 0rem;
		left: 0rem;
		width: 100%;
		height: 100px;
		z-index: 1;

		&>img {
			width: 100%;
			height: 100%;
		}
	}
}

.start_user_list {
	@extend %ul;
	padding-left: 15px;
	border-top: solid 0.1rem #e1e1e1;
	border-bottom: solid 0.1rem #e1e1e1;

	&>li {
		@include grid_line;
		border-bottom: solid 0.1rem #e1e1e1;

		&>img {
			width: 2rem;
			height: 2rem;
			margin: 1rem 1rem 1rem 0rem;
		}

		&>a {
			width: 80%;
			width: calc(100% - 4rem) !important;
			line-height: 4rem;
			font-size: 1.4rem;
			font-family: $fontFamily;
			color: #333;
			
		}

		&:last-child{
			border-bottom: none;
		}
	}
}

@include min-screen(1000px){
	.start_login,
	.start_adv_box {
		width: 48%;
		margin-top: 6rem;
	}
	
	.start_login,
	.start_register {
		.start_login_logo {
			display: none;
		}

		.start_login_title {
			display: block;
		}
	}

	.start_register {
		margin: 7rem auto;
	}

	.start_user_head {
		max-width: 640px;
		width: 50%;
		margin: 0rem auto;

		.start_user_imgbox {
			padding: 10rem 1rem 0rem;	
		}

		.start_user_head_bg {
			height: 15rem;
		}
	}

	.start_user_list {
		max-width: 640px;
		width: 50%;
		margin: 0rem auto;
	}

	.start_register_footer {
		display: block;
	}
}

@include max-screen(1000px){
	.start_login,
	.start_adv_box {
		width: 48%;
		margin-top: 3rem;
	}

	.start_login,
	.start_register {
		.start_login_logo {
			display: none;
		}

		.start_login_title {
			display: block;
		}
	}

	.start_register {
		margin: 5rem auto;
	}

	.start_user_head {
		max-width: 640px;
		width: 50%;
		margin: 0rem auto;

		.start_user_imgbox {
			padding: 10rem 1rem 0rem;	
		}

		.start_user_head_bg {
			height: 15rem;
		}
	}

	.start_user_list {
		width: 50%;
		margin: 0rem auto;
	}

	.start_register_footer {
		display: block;
	}

}

@include max-screen(960px){
	.start_login,
	.start_adv_box {
		width: 48%;
		margin-top: 3rem;
	}

	.start_login,
	.start_register {
		.start_login_logo {
			display: none;
		}

		.start_login_title {
			display: block;
		}
	}

	.start_register {
		margin: 5rem auto;
	}

	.start_user_head {
		width: 50%;
		margin: 0rem auto;

		.start_user_imgbox {
			padding: 10rem 1rem 0rem;	
		}

		.start_user_head_bg {
			height: 15rem;
		}
	}

	.start_user_list {
		width: 50%;
		margin: 0rem auto;
	}

	.start_register_footer {
		display: block;
	}
}

@include max-screen(768px){
	.start_login{
		display: block;
		width: 70%;
		margin: 7rem auto 0rem;
	}

	.start_login,
	.start_register {
		.start_login_logo {
			display: block;
		}

		.start_login_title {
			display: none;
		}
	}

	.start_adv_box {
		display: none;
	}

	.start_register {
		margin: 4rem auto 0rem;
	}

	.start_user_head {
		width: 80%;
		margin: 0rem auto;

		.start_user_imgbox {
			padding: 8rem 1rem 0rem;	
		}

		.start_user_head_bg {
			height: 13rem;
		}
	}

	.start_user_list {
		width: 80%;
		margin: 0rem auto;
	}

	.start_register_footer {
		display: none;
	}
}

@include max-screen(600px){
	.start_login {
		width: 100%;
		margin-top: 1rem;
	}

	.start_login,
	.start_register {
		.start_login_logo {
			display: block;
		}

		.start_login_title {
			display: none;
		}
	}

	.start_adv_box {
		display: none;
	}

	.start_register {
		width: 100%;
		margin: 3rem auto;
	}

	.start_user_head {
		width: 100%;
		margin: 0rem auto;

		.start_user_imgbox {
			padding: 5rem 1rem 0rem;	
		}
		
		.start_user_head_bg {
			height: 10rem;
		}
	}

	.start_user_list {
		width: 100%;
		margin: 0rem auto;
	}

	.start_description {
		font-size: 1rem;
	}

	.start_register_footer {
		display: none;
	}
}